<div :class="calendarClass">
    <context-menu-container>
        <template>
            <div class="event-legends">
                <div :class="{'event-lengend':true, 'Bug':true, 'event-disabled':!isShowlegend.Bug}" @click="legendTrigger('Bug')">
                    <div class="lengend-icon" style="background:rgba(254, 228, 90, 1);"></div>
                    <span style="color:rgba(17, 34, 132, 1);">Bug</span>
                </div>
                <div :class="{'event-lengend':true, 'task':true, 'event-disabled':!isShowlegend.task}" @click="legendTrigger('task')">
                    <div class="lengend-icon" style="background:rgba(247, 110, 154, 1);"></div>
                    <span style="color:rgba(247, 219, 15, 1);">任务</span>
                </div>
                <div :class="{'event-lengend':true, 'todo':true, 'event-disabled':!isShowlegend.todo}" @click="legendTrigger('todo')">
                    <div class="lengend-icon" style="background:rgba(255, 166, 0, 1);"></div>
                    <span style="color:;">待办</span>
                </div>
                <div :class="{'event-lengend':true, 'daily':true, 'event-disabled':!isShowlegend.daily}" @click="legendTrigger('daily')">
                    <div class="lengend-icon" style="background:rgba(60, 255, 0, 1);"></div>
                    <span style="color:rgba(0, 0, 0, 1);">日报</span>
                </div>
                <div :class="{'event-lengend':true, 'reportly':true, 'event-disabled':!isShowlegend.reportly}" @click="legendTrigger('reportly')">
                    <div class="lengend-icon" style="background:rgba(137, 2, 20, 1);"></div>
                    <span style="color:;">汇报</span>
                </div>
                <div :class="{'event-lengend':true, 'testtask':true, 'event-disabled':!isShowlegend.testtask}" @click="legendTrigger('testtask')">
                    <div class="lengend-icon" style="background:rgba(95, 132, 245, 1);"></div>
                    <span style="color:;">测试单</span>
                </div>
                <div :class="{'event-lengend':true, 'Story':true, 'event-disabled':!isShowlegend.Story}" @click="legendTrigger('Story')">
                    <div class="lengend-icon" style="background:rgba(85, 0, 255, 0.95);"></div>
                    <span style="color:;">需求</span>
                </div>
            </div>
            <FullCalendar
                ref="calendar"
                :locale="$i18n.locale"
                height="parent"
                :firstDay="1"
                :eventLimit="true"
                :editable="!isSelectFirstDefault && true"
                :buttonText="buttonText" 
                :header="header"
                :plugins="calendarPlugins"
                :events="searchEvents.bind(_self)"
                :customButtons="{gotoDate: {text: $t('app.calendar.gotoDate'),click: this.openDateSelect.bind(_self)}}"
                :validRange="validRange"
                :defaultDate="defaultDate"
                :eventRender="eventRender.bind(_self)"
                @dateClick="onDateClick.bind(_self)"
                @eventClick="onEventClick.apply(_self, arguments)"
                @eventDrop="onEventDrop.bind(_self)"
                defaultView="dayGridMonth"
            ></FullCalendar>
            <modal v-model="modalVisible" width="250px" :title="$t('app.calendar.dateSelectModalTitle')" class-name="date-select-modal" @on-ok="gotoDate()">
                <el-date-picker style="width: 200px;" v-model="selectedGotoDate" type="date"></el-date-picker>
            </modal>
        </template>
    </context-menu-container>
</div>
